<template>
	<view>
		<view class="grids">
			<view class="grid" v-for="(item,index) in items" align="" @click="goPage(item)">
				<view class="cardBg">
					<view class="card">
						<u-image mode="scaleToFill" height="170" width="100%" :src="item.image" :lazy-load="true">
						</u-image>
						<view class="content">
							<view class="title"> <text class="grid-text">{{item.name}}</text></view>
							<view class=" flex"> <text class="price">{{item.price?item.price:0}}</text> <text
									class="unprice">{{item.marketPrice?item.marketPrice:0}}￥</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 补0，如1 -> 01
	function padZero(num, targetLength = 2) {
		let str = `${num}`
		while (str.length < targetLength) {
			str = `0${str}`
		}
		return str
	}
	const SECOND = 1000
	const MINUTE = 60 * SECOND
	const HOUR = 60 * MINUTE
	const DAY = 24 * HOUR

	function parseTimeData(time) {
		const days = Math.floor(time / DAY)
		const hours = Math.floor((time % DAY) / HOUR)
		const minutes = Math.floor((time % HOUR) / MINUTE)
		const seconds = Math.floor((time % MINUTE) / SECOND)
		const milliseconds = Math.floor(time % SECOND)
		return {
			days,
			hours,
			minutes,
			seconds,
			milliseconds
		}
	}

	function parseFormat(format, timeData) {
		let {
			days,
			hours,
			minutes,
			seconds,
			milliseconds
		} = timeData
		// 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
		if (format.indexOf('DD') === -1) {
			hours += days * 24
		} else {
			// 对天补0
			format = format.replace('DD', padZero(days))
		}
		// 其他同理于DD的格式化处理方式
		if (format.indexOf('HH') === -1) {
			minutes += hours * 60
		} else {
			format = format.replace('HH', padZero(hours))
		}
		if (format.indexOf('mm') === -1) {
			seconds += minutes * 60
		} else {
			format = format.replace('mm', padZero(minutes))
		}
		if (format.indexOf('ss') === -1) {
			milliseconds += seconds * 1000
		} else {
			format = format.replace('ss', padZero(seconds))
		}
		return format.replace('SSS', padZero(milliseconds, 3))
	}

	function isSameSecond(time1, time2) {
		return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
	}

	export default {
		data() {
			return {
				timeInfo: '',
			}
		},
		props: {
			items: {
				type: Array,
				default: []
			}
		},
		methods: {
			goPage: function(item) {
				uni.navigateTo({
					url: "/page/workbench/pages/agent/show?name=" + item.name + "&id=" + item.id
				})
			},
			onChange(e) {
				console.log(e)
				this.timeInfo = parseFormat('HH:mm:ss', e);
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		flex-direction: row;

	}

	.img {
		width: 100%;
	}

	.grids {
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr 1fr;

		grid-gap: 10px;
	}

	.grid {}

	.cardBg {

		overflow: hidden;

		padding: 5px;
	}

	.card {
		background-color: #fff;
		overflow: hidden;
		width: 100%;
		border-radius: 6px;
	}

	.card .content {
		padding: 5px;
		font-size: 12px;
		color: #ex0000;
	}

	.title {
		font-weight: bold;
		text-align: center;
		font-size: 12px;
	}

	.price {
		color: orange;
		font-size: 14px;
		font-weight: bold;
	}

	.unprice {
		color: #ccc;
		font-size: 10px;
		line-height: 20px;
		text-decoration: line-through;
	}

	.u-grid-item {
		align-items: normal !important;
	}

	.active {
		position: absolute;
		z-index: 100;
		left: 0;
		top: 0;
		padding: 5px;
		background-color: crimson;
		font-size: 24upx !important;
		border-bottom-right-radius: 10px;
		color: #fff !important;
		width: 100%;
		display: grid;
		justify-content: space-between;
		grid-template-columns: 1fr 1fr;
	}

	.textt {
		color: #fff !important;
	}

	.u-count-down__text {
		color: #fff !important;
		font-size: 24upx !important;
	}
</style>
